@import 'typography/_utils.pcss';

/* HEADINGS */

.typo-h1 {
  font-size: 3.6rem;
  font-weight: 600;
  line-height: 1;
}

.typo-h2 {
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1;
}

.typo-h3 {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.2;
}

.typo-h4 {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
}

.typo-h5 {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.2;
}

.typo-h6 {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.2;
}

/* BODY */

.typo-body-regular {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
}

.typo-body-bold {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.5;
}

.typo-body-underline {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}

.typo-body-regular-small {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
}

.typo-body-bold-small {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.5;
}

.typo-body-underline-small {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}

/* CAPTIONS */

.typo-caption {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.typo-caption-small {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* FORM */

.typo-form-label {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.typo-form-value {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
}

.typo-form-value-small {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.2;
}

.typo-form-info {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.2;
}

/* ACTION */

.typo-action-button {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
}

.typo-action-button-small {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
}

.typo-action-link {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: underline;
}

.typo-action-link-small {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: underline;
}
